<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pelican支持Swiftype搜索 | Mike SU</title>
<meta property="og:title" content="Pelican支持Swiftype搜索 - Mike SU">
<meta property="og:type" content="article">
	
<meta property="article:published_time" content='2014-10-28T14:57:11&#43;08:00'>
	
	
<meta property="article:modified_time" content='2014-10-28T14:57:11&#43;08:00'>
	
<meta name="Keywords" content="">
<meta name="description" content="Pelican支持Swiftype搜索">
	
<meta name="author" content="Mike SU">
<meta property="og:url" content="https://mikesu.net/27/">
	
	<link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/purecss/build/pure-min.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/purecss/build/grids-responsive-min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="/css/style.min.css">
	
</head>
<body>
    <div class="body_container">
		<header id="header">
			<div class="site-name ">
	
	<a id="logo" href="/">Mike SU</a>
	<p class="description">Note &amp; Blog</p>
</div>
		    <nav id="nav-menu">
	<a class="" href="/">
		<i class="fa fa-home"> 首页</i>
	</a>
	
	<a  href="/archives/" title="归档">
		<i class='fa fa-archive'></i> 归档
	</a>
	
	<a  href="/about/" title="关于">
		<i class='fa fa-user'></i> 关于
	</a>
	
</nav>
		</header>
        <div id="layout" class="pure-g">
            <div class="pure-u-1 pure-u-md-3-4">
				<main class="content_container">
					
<article class="post">
	

	<h1 class="post-title">Pelican支持Swiftype搜索</h1>
	<div class="post-meta">
	2014年10月28日
	
	</div>
	<div class="post-content">
		<h2 id="引言">引言</h2>
<p>一般的动态博客系统都提供了搜索功能，但是对于静态博客来说就必须借助外部系统来完成搜索的功能了。
Google和Baidu都提供了站内搜索的功能，但是他们有明显缺点：</p>
<ol>
<li>提供的搜索界面和博客网站是完全分离的，很难整合在一起。</li>
<li>搜索界面非常难看，而且不能修改样式。</li>
<li>没有提供个性化的搜索结果管理，例如人工干预排序</li>
<li>国内来说Google被墙，几乎无法使用，Baidu的搜索结果一直不敢恭维。</li>
</ol>
<p>现在有一款产品 Swiftype试图解决这个问题。 这款产品能够为任意网站提供个性化的搜索结果管理。什么意思呢？网站所有者可以根据信息的重要程度，通过 Swiftype 的“排序控制”功能将重要的搜索结果排到前面，并将不重要的结果移除或者挪到后面。那么用户在网站输入关键词搜索时，显示的内容排序也会跟网站所有者的预期是一样的。</p>
<h2 id="获取swiftype嵌入代码">获取Swiftype嵌入代码</h2>
<p>到<a href="https://swiftype.com/">Swiftype</a>注册自己的账号。并创建一个搜索引擎。
设置代码
<img src="/posts/27/swiftype_setp_1.jpg" alt="">
获取代码
<img src="/posts/27/swiftype_setp_2.jpg" alt="">
复制代码
<img src="/posts/27/swiftype_setp_3.jpg" alt=""></p>
<h2 id="修改pelican-octopress-theme模板">修改pelican-octopress-theme模板</h2>
<p>1.找到\pelican-octopress-theme\templates\base.html文件，在<code>&lt;head&gt;&lt;/head&gt;</code>里面加入下面代码</p>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">{% if SWIFTYPE_SCRIPT %}
    {{ SWIFTYPE_SCRIPT }}
{% endif %}
</code></pre></div><p>2.找到\pelican-octopress-theme\templates_includes\navigation.html文件，在{% raw %}{% if SEARCH_BOX %}{% endraw %}
代码块下面加入</p>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">{% if SWIFTYPE_SCRIPT %}
&lt;<span style="color:#309;font-weight:bold">form</span>&gt;
    &lt;<span style="color:#309;font-weight:bold">fieldset</span> <span style="color:#309">role</span><span style="color:#555">=</span><span style="color:#c30">&#34;search&#34;</span>&gt;
        &lt;<span style="color:#309;font-weight:bold">input</span> <span style="color:#309">class</span><span style="color:#555">=</span><span style="color:#c30">&#34;search&#34;</span> <span style="color:#309">type</span><span style="color:#555">=</span><span style="color:#c30">&#34;text&#34;</span> <span style="color:#309">id</span><span style="color:#555">=</span><span style="color:#c30">&#34;st-search-input&#34;</span> <span style="color:#309">placeholder</span><span style="color:#555">=</span><span style="color:#c30">&#34;Search&#34;</span>/&gt;
    &lt;/<span style="color:#309;font-weight:bold">fieldset</span>&gt;
&lt;/<span style="color:#309;font-weight:bold">form</span>&gt;
{% endif %}
</code></pre></div><p>3.添加\pelican-octopress-theme\templates\search.html文件</p>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">{% extends &#39;base.html&#39; %}
{% block content %}
{% set index=True %}
&lt;<span style="color:#309;font-weight:bold">div</span> <span style="color:#309">class</span><span style="color:#555">=</span><span style="color:#c30">&#34;blog-index&#34;</span>&gt;
    &lt;<span style="color:#309;font-weight:bold">div</span> <span style="color:#309">id</span><span style="color:#555">=</span><span style="color:#c30">&#34;st-results-container&#34;</span> <span style="color:#309">style</span><span style="color:#555">=</span><span style="color:#c30">&#34;padding: 20px;&#34;</span>&gt;
        <span style="color:#999;font-weight:bold">&amp;nbsp;</span>
    &lt;/<span style="color:#309;font-weight:bold">div</span>&gt;
&lt;/<span style="color:#309;font-weight:bold">div</span>&gt;
{% endblock %}
</code></pre></div><h2 id="修改pelicanconfpy文件">修改pelicanconf.py文件</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-py" data-lang="py">TEMPLATE_PAGES <span style="color:#555">=</span> {<span style="color:#c30">&#39;search.html&#39;</span>: <span style="color:#c30">&#39;search.html&#39;</span>}

SWIFTYPE_SCRIPT <span style="color:#555">=</span><span style="color:#c30">&#39;&#39;&#39;[粘贴swiftype代码]&#39;&#39;&#39;</span>
</code></pre></div><p>重新生成网站</p>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">$pelican content
</code></pre></div><h2 id="测试">测试</h2>
<p>如果一切顺利的话，在导航栏会出现搜索框，输入关键字试试吧。</p>

	</div>
	
	
<div class="post-nav">
	
	
	<a class="pre" href="/26/">启用免费版MarkdownPad2的Markdown扩展模式</a>
	
	
	
	
	<a class="next" href="/28/">我的博客之路</a>
	
	
</div>

	
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://mikesu.net">Mike SU</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://mikesu.net/27/">https://mikesu.net/27/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">署名 4.0 国际 (CC BY 4.0)</a>进行许可。</li>
    </ul>
</div>
<br/>


	

	
    

    
    
</article>

				</main>
            </div>
			<div class="pure-u-1-4 hidden_mid_and_down">
			    <div id="sidebar">
				    <section class="widget">
<form class="search-form" action='/search/' method="get" accept-charset="utf-8" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
	  
</form>
</section>
					
					<section class="widget">
<h3 class="widget-title"><i class="fa fa-file-o"> 最近文章</i></h3>
<ul class="widget-list">
    
    <li>
        <a href="/35/" title="搭建 JavaScript 开发环境">搭建 JavaScript 开发环境</a>
    </li>
    
    <li>
        <a href="/34/" title="Java RMI远程调用简单示例">Java RMI远程调用简单示例</a>
    </li>
    
    <li>
        <a href="/33/" title="通过WebRTC实现网页间文件传输">通过WebRTC实现网页间文件传输</a>
    </li>
    
    <li>
        <a href="/32/" title="Boot2docker通过Samba实现文件夹共享">Boot2docker通过Samba实现文件夹共享</a>
    </li>
    
    <li>
        <a href="/31/" title="docker 使用代理连接 Docker Hub">docker 使用代理连接 Docker Hub</a>
    </li>
    
    <li>
        <a href="/30/" title="Boot2docker通过VirtualBox Guest Additions实现目录共享">Boot2docker通过VirtualBox Guest Additions实现目录共享</a>
    </li>
    
    <li>
        <a href="/29/" title="绿色版Solr安装配置">绿色版Solr安装配置</a>
    </li>
    
    <li>
        <a href="/28/" title="我的博客之路">我的博客之路</a>
    </li>
    
    <li>
        <a href="/27/" title="Pelican支持Swiftype搜索">Pelican支持Swiftype搜索</a>
    </li>
    
    <li>
        <a href="/26/" title="启用免费版MarkdownPad2的Markdown扩展模式">启用免费版MarkdownPad2的Markdown扩展模式</a>
    </li>
    
</ul>
</section>
					
					
				</div>
			</div>
			<div class="pure-u-1 pure-u-md-3-4">
				<footer id="footer">
					<div>
	Copyright &copy; 2021 <a href="https://mikesu.net">Mike SU</a>
	
</div>
<div>
	Powered by<a href="https://gohugo.io/" target="_black" rel="nofollow"> Hugo</a>
	Theme by<a href="https://github.com/tufu9441/maupassant-hexo" target="_black"> Maupassant</a>
</div>
<a id="rocket" href="#top"></a>
					<script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/totop.js"></script>

					
	<script type="text/javascript" src="/js/toc.js"></script>

				</footer>
			</div>
        </div>
    </div>
</body>
</html>